<cart-notification class="cart-notification end-0 w-100 animate {{ class }}" 
  aria-modal="true" 
  aria-label="{{ 'sections.cart.added_message' | t }}" 
  role="dialog" 
  tabindex="-1" 
  data-interval="{% if settings.enable_turn_off_automatically %}4000{% else %}-1{% endif %}">
  <div class="position-relative">
    <div class="as-cart-notification dropdown-menu d-block position-absolute end-0 py-0 border-top-0 w-100">
      <div class="position-absolute top-0 end-0 mt-n1 me-1 text-end lh-1">
        <span class="d-inline-flex align-items-center justify-content-center cursor-pointer text-muted icon-close icon-wrap-sm as-close">{% render 'icon-close' %}</span>
      </div>
      <div class="mx-4">
        <p class="mt-6 mb-4 d-inline-flex align-items-center">{% render 'icon-added' %}<span class="ps-2">{{ 'sections.cart.added_message' | t }}</span></p>
    
        <div class="cart-notification-product" 
          class="cart-items-list"
          data-id="cart-notification-product"></div>
      </div>
  
      <hr class="my-0">
      
      <div class="mx-4 my-5">
        {%- if settings.show_view_cart_button_in_mini_cart -%}
          <div class="text-center">
            <a href="{{ routes.cart_url }}" class="btn btn-outline-primary w-100" aria-label="{{ 'sections.cart.view_cart' | t }}">{{ 'sections.cart.view_cart' | t }}</a>
          </div>
        {%- endif -%}

        <div class="cart-ctas as-cart-ctas mt-2">
          <a href="{{ routes.cart_url }}" data-origin="{{ routes.cart_url }}" class="btn btn-primary w-100 as-btn-cart-checkout">{{ 'sections.cart.checkout' | t }}</a>
        </div>
      </div>
    </div>
  </div>

  <div class="as-modal-backdrop modal-backdrop fade"></div>
</cart-notification>